<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<link href="<%=path%>/static/bootstrap4.6.0/css/bootstrap.css" rel="stylesheet">
<script src="<%=path%>/static/jq/jquery-3.6.0.js"></script>
<script src='<c:url value="/static/bootstrap4.6.0/js/bootstrap.js"/>'></script>

<html>
<head>
    <title>购物车</title>
</head>
<body>
<div class="page-container text-center">
    <h4 class="mt-4 mb-4">购物车</h4><a class="btn btn-success" href="${pageContext.request.contextPath}/goods/getAllByPage">返回商品页面</a>
    <a href="javascript:;" class="btn btn-success">清空购物车</a>
    <button class="btn btn-success" id="btn">批量删除</button>

    <a onclick="showOrder(${sessionScope.loginUser.userId},'${sessionScope.loginUser.userName}')" href="javascript:;" class="btn btn-success">查看订单</a>

    <table class="table text-center">
        <form id="form" action="${pageContext.request.contextPath}/user/shop/deleteAll" method="get">

            <thead>
            <tr>
                <td><input type="checkbox"></td>
                <td>用户名</td>
                <td>姓名</td>
                <td>电话</td>
                <td>地址</td>
                <td>商品名</td>
                <td>单价</td>
                <td>数量</td>
                <td>总计</td>
                <td>操作</td>
            </tr>
            </thead>
            <tbody>
            <c:forEach items="${carts}" var="one">
                <tr>
                    <td hidden>${one.cartId}</td>
                    <td hidden>${one.userId}</td>
                    <td hidden>${one.goodsId}</td>
                    <td><input type="checkbox" name="ids" value="${one.cartId}"></td>
                    <input name="username" value="${one.userName}" hidden>
                    <td>${one.userName}</td>
                    <td>${one.userNick}</td>
                    <td>${one.phone}</td>
                    <td>${one.address}</td>
                    <td>${one.goodsName}</td>
                    <td>${one.price}</td>

                    <td>
                        <button class="btn btn-link" type="button" onclick="updateNum(${one.cartId},'sub',${one.number},'${one.userName}')">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-dash-lg" viewBox="0 0 16 16">
                                <path d="M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z"/>
                            </svg>
                        </button>
                            ${one.number}
                        <button class="btn btn-link" type="button" onclick="updateNum(${one.cartId},'add',${one.number},'${one.userName}')">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-lg" viewBox="0 0 16 16">
                                <path d="M8 0a1 1 0 0 1 1 1v6h6a1 1 0 1 1 0 2H9v6a1 1 0 1 1-2 0V9H1a1 1 0 0 1 0-2h6V1a1 1 0 0 1 1-1z"/>
                            </svg>
                        </button>
                    </td>
                    <td>${one.total}</td>
                    <td>
                        <a href="#" onclick="deleteOne(${one.cartId},'${one.userName}')">删除</a>
                        <a href="#" onclick="newOrder(${one.userId},${one.total},${one.goodsId},${one.number},'${one.userName}',${one.cartId})">购买</a>
                    </td>
                </tr>
            </c:forEach>
            </tbody>
            <tfoot>

            </tfoot>
        </form>
    </table>

</div>

</body>
<script>

    function showOrder(id,username){
        location.href = "${pageContext.request.contextPath}/user/shop/showOrder?userId=" + id + "&username=" + username;

    }

    document.getElementById("btn").onclick = function () {
        if (confirm("你确定删除吗")) {

            document.getElementById("form").submit()
        }
    }


    function deleteOne(id,username) {
        //刷新页面
        if (confirm("你确定要清除该商品吗吗？")) {
            location.href = "${pageContext.request.contextPath}/user/shop/deleteOneOnCart?cartId=" + id+ "&username=" + username;
        }
    }

    function updateNum(id, addAndSub, number,username) {
        //跳转
        location.href = "${pageContext.request.contextPath}/user/shop/updateNum?cartId=" + id + "&addAndSub=" + addAndSub + "&number=" + number+ "&username=" + username;
    }

    function newOrder(id, total, goodsId,number,username,cartId) {
        if(confirm("你确定购买此商品吗!")){
            location.href = "${pageContext.request.contextPath}/user/shop/createOrder?userId=" + id +"&total=" + total + "&goodsId=" + goodsId + "&number=" + number + "&username=" + username+ "&cartId=" + cartId;
        }
    }


</script>
</html>
